$(function(){
	
	var searchValue = lt.getUrlParams().key
	searchValue = decodeURIComponent(searchValue) || '' // 中文需要url解码

	$('.search_input').val(searchValue);

	var render = function(){

		getProductListData({
			//后台接口需要的数据
			proName:searchValue,
			page:1,
			pageSize:5
		},function(res){
			//拿到数据，在页面模板渲染
			console.log(res)
			$('.lt_product').html(template('searchList',res))

		})
	}
	render()

	//2.点击搜索渲染
	//2.1 注册点击事件
	$('.search_btn').on('tap',function(){
		var searchValue = $.trim($('.searchValue').val())
		//2.1.1 加载状态提示
		// $('.lt_product').html('<div class="loading"><span class="mui-icon mui-icon-spinner"></span></div>')
		//2.2.2 请求数据重新渲染
		getProductListData({
			proName:searchValue,
			page:1,
			pageSize: 5
		},function(res){
			$('lt_product').html(template('searchList',res))
		})
	})

	//3. 点击排序功能
	$('.lt_order [data-type]').on('tap',function(){
		//3.3 所有的位置为初始状态
		$(this).siblings().find('span').removeClass('fa-angle-up').addClass('fa-angle-down')
		// 3.1 判断当前是否选中状态
    	if ($(this).hasClass('now')) {
    		var item = $(this).find('span')
    		console.log(item)
	    	if (item.hasClass('fa-angle-down')) {
	    		item.removeClass('fa-angle-down').addClass('fa-angle-up')
	    	} else {
	    		item.removeClass('fa-angle-up').addClass('fa-angle-down')
	    	}
    	}
    	// 3.2 实现排他功能
    	$(this).addClass('now').siblings().removeClass('now')
    	// 3.4 请求数据重新渲染
    	// 3.4.1 获取排序类型
    	var order = {}
    	var key = $(this).data('type')
    	// 3.4.2 获取升序还是降序   1 升序 2 降序 接口提供
    	var val = $(this).find('span').hasClass('fa-angle-down') ? 2 : 1
    	order[key] = val
    	getProductListData($.extend({
    		//拼接对象的方法$.extend(a,b)
            proName: searchValue,
            page: 1,
            pageSize: 5,
        }, order), function(res) {
            // console.log(res)
            // 1.3.2 用模板渲染数据
            $('.lt_product').html(template('searchList', res))
        })
	})

    // 0 初始化下拉 上拉
    mui.init({
      pullRefresh: {
        container:".mui-scroll-wrapper",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: {
          height: 50,//可选,默认50.触发下拉刷新拖动距离,
          auto: false,//可选,默认false.首次加载自动下拉刷新一次
          contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback: function (){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
         
            //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
            //没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
            // 补充说明  新版本下拉上拉更新啦
            // this --> var that = this
            // this --> bind(this)
            render()
            setTimeout(function() {
                // 下拉刷新效果隐藏
                this.endPulldownToRefresh()
            }.bind(this), 1000)
          }
        },
        up: {
            callback: function () {
                // 上拉效果隐藏
                var that = this
                setTimeout(function() {
                    // 下拉刷新效果隐藏
                    that.endPullupToRefresh()
                }, 1000)
            }
        }
      }
    })
})

function getProductListData(params,callback){
	$.ajax({
		type:'get',
		url:'/product/queryProduct',
		async:true,
		data:params,
		dataType:'json',
		success:function(res){
			setTimeout(function(){
				if(res.data.length == 0){
					mui.toast('没有相关商品')
				}
				callback && callback(res)

			},1000)
		}

	});
}





